<template>
	<view class="page">
		<view class="card card-wrap">
			<view class="card__head">
				<view class="card__head--left">我的应用</view>
				<view class="card__head--right" v-show="moduleIconVisible">长按拖动调整顺序</view>
			</view>
			<sortable-renderjs domId="horizontal" @changeList="horizontalListChange" :options="options">
				<view class="card__body horizontal" id="horizontal">
					<view class="home__body--box-item" v-for="(item,index) in list" :key="item.ModuleId" :data-id="item.ModuleId" @click="throttle(item)" @longtap.self="longpressModule">
						<view class="module-icon-box" v-if="moduleIconVisible" @click.stop="delModule(item,index)">
							<view :class="['module-icon','animated',(moduleIconVisible ? 'swing' : '')]">
								<image src="../../../../static/theme/default/home/henggang.png" mode=""></image>
							</view>
						</view>
						<view class="home__body--box-item-icon" :style="{'background-color': item.ModuleTheme}" hover-class="clickable">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="home__body--box-item-text">{{item.ModuleName}}</view>
					</view>
				</view>
			</sortable-renderjs>
			<view class="card__body">
			</view>
		</view>
		<view class="card" v-for="v in category" :key="v.id">
			<view class="card-wrap" v-if="v.list.length">
				<view class="card__head">
					<view class="card__head--left">{{v.name}}</view>
					<view class="card__head--right" v-show="moduleIconVisible">点击右上角按钮添加到我的应用</view>
				</view>
				<view class="card__body">
					<view class="home__body--box-item" v-for="item in v.list" @click="throttle(item)" :key="item.Id" :data-id="item.Id" @longtap.stop="longpressModule">
						<view class="module-icon">
							<image src="../../../../static/theme/default/home/jia.png" mode="" v-show="moduleIconVisible && !item.check" @click.stop="addModule(item)"></image>
							<view class="module-status"  v-show="moduleIconVisible && item.check">已添加</view>
						</view>
						<view class="home__body--box-item-icon" :style="{'background-color': item.ModuleTheme}" hover-class="clickable">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="home__body--box-item-text">{{item.ModuleName}}</view>
					</view>
					<view class="home__body--box-item" v-if="((v.list.length) %4) !== 0" v-for="n in (4-(v.list.length) %4)"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '../../../../common/_custom.js'
	import _data from '../../../../common/_data.js'
	import sortableRenderjs from '@/uni_modules/cms-sortable-renderjs/cms-sortable-renderjs';
	import {formatImg,throttle,goScanCode} from '../../../../common/custom_util.js'
	
	export default {
		components: {
			sortableRenderjs
		},
		data() {
			return {
				options: {
					disabled: true,
					delay: 100
				},
				list: [],
				userList: [],
				name: '',
				path: '',
				radiovalue1: '',
				obsusername: _data.localData('name'),
				obscode: _data.localData('obscode'),
				appmoduleids: '',
				moduleIconVisible: false,
				moduleId: [],
				category: [],
				throttle: null
			}
		},
		onLoad() {
			let that = this;
			this.getAppCategoryList()
			this.throttle = throttle(this.goModule,100)
		},
		onReady() {
			// #ifdef H5
			let text = document.getElementsByClassName('uni-page-head-btn')[2]
			text.innerHTML = '管理'
			text.addEventListener('click',() => {
				this.options = {
					animation: 600,
					disabled: false,
					delay: 100
				}
				this.moduleIconVisible = true;
				let cancle = document.getElementsByClassName('uni-page-head-btn')[0]
				cancle.innerHTML = '取消'
				cancle.addEventListener('click',() => {////监听H5取消点击事件，该按钮会自动返回
					this.userList.forEach(item => {
						if(item.Sorting != '99') this.list.push(item)
					})
				})
				let save = document.getElementsByClassName('uni-page-head-btn')[2]
				save.innerHTML = '保存'
				save.addEventListener('click',() => {//监听H5保存点击事件
					this.saveModule();
				})
			})
			// #endif
		},
		onNavigationBarButtonTap(e) {
			let that = this;
			if(!this.moduleIconVisible && e.index == 1) {//APP点击管理
				this.options = {
					animation: 600,
					disabled: false,
					delay: 100
				}
				this.moduleIconVisible = true;
				// #ifdef APP-PLUS
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let currentWebview = page.$getAppWebview();
				let titleNView = currentWebview.getStyle().titleNView;
				// 添加文字过长截取为3个字符，请根据自己业务需求更改
				titleNView.buttons[0].text = '取消';
				titleNView.buttons[1].text = '保存';
				currentWebview.setStyle({
					titleNView: titleNView
				});
				// #endif
			} else {
				if(e.index == 0) {//APP点击取消
					// #ifdef APP-PLUS
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
					let currentWebview = page.$getAppWebview();
					let titleNView = currentWebview.getStyle().titleNView;
					// 添加文字过长截取为3个字符，请根据自己业务需求更改
					titleNView.buttons[0].text = '';
					titleNView.buttons[1].text = '管理';
					currentWebview.setStyle({
						titleNView: titleNView
					});
					let list = [];
					this.userList.forEach(item => {
						if(item.Sorting != '99') {
							list.push(item)
						}
					})
					this.list = list;
					// #endif
				} else {//APP点击保存
					this.saveModule();
				}
				this.moduleIconVisible = false
				this.options = {
					animation: 600,
					disabled: true,
					delay: 100
				}
			}
		},
		watch: {
			list: {
				deep: true,
				handler() {
					this.category.forEach(item => {
						item.list.forEach(value => {
							let flag = false;
							this.list.forEach(v => {
								if(v.ModuleId == value.ModuleId) {
									flag = true;
								}
							})
							this.$set(value,'check',flag);
						})
					})
				}
			}
		},
		methods: {
			/**
			 * 拖动事件
			 * @param {Object} v 回调参数
			 */
			horizontalListChange(v) {
				console.log(v)
				this.moduleId = v
			},
			/**
			 * 长按我的应用模块事件
			 */
			longpressModule() {
				if(this.moduleIconVisible) {
					return
				}
				uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
			},
			/**
			 * 保存模块相关接口，暂时用缓存替代
			 */
			saveModule() {
				let that = this;
				let temp = [];
				if(!that.list.length) {
					uni.showToast({
						title: '至少选择一个模块',
						icon: 'none'
					})
					return
				}
				if(this.moduleId.length) {
					that.moduleId.forEach((item,index) => {
						that.userList.forEach(v => {
							if(item == v.ModuleId) {
								temp.push({
									appmoduleid: v.ModuleId,
									obsusername: that.obsusername,
									sorting: "" + (index + 1)
								})
							}
						})
					})
				} else {
					that.list.forEach((v,i) => {
						temp.push({
							appmoduleid: v.ModuleId,
							obsusername: that.obsusername,
							sorting: "" + (i + 1)
						})
					})
				}
				_custom.getDataJava({
					code: 4,
					apiname: 'delAppModuleUser',
					apiparam: {
						obsusername: this.obsusername
					},
					success() {
						_custom.getDataJava({
							code: 13,
							apiname: 'addAppModuleUser',
							apiparam: temp,
							success() {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								},500)
							}
						})
					}
				})
			},
			/**
			 * 跳转模块对应页面
			 * @param {Object} v 模块数组中的对象
			 */
			goModule(v) {
				console.log(v)
				if(this.moduleIconVisible) {
					return
				}
				let ModuleRouter = v.ModuleRouter;
				let path = ModuleRouter.split('?')[0];
				let param = ModuleRouter.split('?')[1];
				param = param ? 'name=' + v.ModuleName + '&' + param : 'name=' + v.ModuleName;
				if(path == 'scancode') {
					// #ifdef APP-PLUS
						goScanCode()
					// #endif
				} else if(path){
					let url = '../' + path + '/index?path=' + path + '&' + param;
					uni.navigateTo({
						url: url,
						fail(err) {
							uni.showToast({
								title: '功能开发中...',
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({
						title: '功能开发中...',
						icon: 'none'
					})
				}
			},
			/**
			 * 获取模块分类
			 */
			getAppCategoryList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getAppCategoryList',
					success(res) {
						_custom.getDataJava({
							apiname: 'getAppModuleUserPower',
							apiparam: {
								obsusername: that.obsusername
							},
							success(response) {
								that.userList = response;
								let temp = [];
								let list = [];
								response.forEach(item => {
									try {
										item.icon = formatImg(item.ModuleImage)
									} catch (e) {}
									if(item.Sorting != '99') {
										item.check = true;
										temp.push(item)
									} else {
										item.check = false;
									}
								})
								res.forEach(item => {
									item.list = [];
									response.forEach(v => {
										if(item.id == v.CategoryId) {
											item.list.push(v)
										}
									})
								})
								that.category = res;
								if(temp.length) {
									temp.forEach((v,i) => {
										temp.forEach((item,index) => {
											if(item.Sorting == (i+1)) list.push(item)
										})
									})
									that.list = list;
									return
								}
								if(response.length < 11) {
									that.list = response;
								} else {
									that.list = response.splice(0,11);
								}
							}
						})
					}
				})
			},
			/**
			 * 添加模块
			 * @param {Object} v 待添加的模块
			 */
			addModule(v) {
				if(this.list.length > 10) {
					uni.showToast({
						title: '超过最大数量,请先删除模块',
						icon: 'none'
					})
					return
				}
				let flag = false;
				this.list.forEach(item => {
					if(item.ModuleId == v.ModuleId) {
						flag = true;
					}
				})
				if(flag) {
					uni.showToast({
						title: '该模块已经添加',
						icon: 'none'
					})
				} else {
					// this.$set(v,'check',true);
					this.list.push(v)
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
				}
			},
			/**
			 * 删除模块
			 * @param {Object} v 待删除的模块
			 * @param {Object} i 待删除的模块下标
			 */
			delModule(v,i) {
				this.list.splice(i,1)
				// this.category.forEach(item => {
				// 	item.list.forEach(value => {
				// 		if(v.ModuleId == value.ModuleId) this.$set(value,'check',false);
				// 	})
				// })
			}
		}
	}
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #fff;
		border-top: 1rpx solid #eee;
	}
	
	.card-wrap {
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.card__body {
		width: 100%;
		height: 100%;
		padding-top: 10rpx;
		overflow: hidden;
	}
	
	.home__body--box-item {
		float: left;
		width: 175rpx;
		height: 175rpx;
		margin-top: 20rpx;
		position: relative;
	}
	
	
	.home__body--box-item-icon {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
		text-align: center;
		background-color: #FAF7F2;
		border-radius: 20rpx;
	}
	
	.clickable {
		background-color: rgba(0,0,0,.1);
	}
	
	.home__body--box-item-icon > image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 25rpx;
	}
	
	.home__body--box-item-text {
		color: #000;
		text-align: center;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
	
	.module-box {
		width: 600rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	
	.module-item {
		display: flex;
		height: 100rpx;
		align-items: center;
	}
	
	.card__head {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.card__head--left {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.card__head--right {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.module-icon-box {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 8;
	}
	
	.module-icon {
		position: absolute;
		top: -15rpx;
		right: 20rpx;
		/* #ifdef APP-PLUS */
		z-index: 99999;
		/* #endif */
		z-index: 9;
		border-radius: 50%;
	}
	
	.module-icon > image {
		width: 35rpx;
		height: 35rpx;
	}
	
	.module-status {
		padding: 3rpx;
		font-size: 16rpx;
		background-color: #aaa;
		border-radius: 10rpx;
		color: #fff;
	}
	
	/deep/ .custom-input {
		border-color: #aaa !important;
	}
</style>
